<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //  同源策略与跨域
        // 1.同源策略是浏览器的一种安全性策略
        // 2.同源标准：协议、域名、端口、都必须一致。
        // 3.它最早的时候是针对cookie的访问权限来设置的，如果A网站的协议、域名、端口只要有一个与B网站不同，A网站就不能访问B网站发送的cookie
        // 4.它的目的是为了保证用户信息的安全，防止恶意的网站窃取数据
        // Ajax请求限制
        // A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求。
        // 但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

        // 跨域请求的实现方式有三种
        // "	JSONP
        // "	CORS协议
        // "	代理服务器

        // JSONP的原理
        // JSON padding 用于模拟ajax请求的操作，来实现跨域的效果


        // 1.html页面中 script 标签中的 src属性不受同源策略的限制
        // 2.服务端的接口返回的是一个调用函数形式的字符串，把要传给客户端的数据，作为函数的参数。 例如： fn('hello world!')
        // 3.在浏览器里面，通过script的src属性来访问服务端的接口，script会解析它获取到的字符串，并且执行。
        // 4.在页面的全局中，准备一个函数，通过函数的形参接收服务端传来的数据
        // 5.可以在函数的内部，对数据进行处理

        // 好处：
        // 1.可以实现跨域的请求
        // 2.浏览器的兼容性特别好

        // 缺点：
        // 1.JSONP不是真正的ajax请求，只是一种模拟。
        // 2.JSONP只能发GET请求
        // 3.异常处理是无能为力的
        // 4.JSONP的使用还是需要后端的配合

        // CORS协议
        // 1.服务端通过设置响应头部，告诉浏览器，符合cors规定的ajax请求是允许进行跨域访问服务端的。
        // res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');    // origin  允许的源   * 所有源 
        //     res.header("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");  // 允许的请求头部 
        //     res.header('Access-Control-Allow-Methods', 'GET, POST');   // 允许的请求方式

        // 2.三个头部设置
        // （1）method请求方式
        // （2）Origin请求源 *代表所有的源都可以访问 也可以写具体的url
        // （3）header请求头部

        // 3.每一次ajax请求发出的时候，浏览器先拦截ajax请求。 
        // 浏览器和服务端之间进行一次预请求（preflight request）。
        // 浏览器拿着ajax的请求origin、method、headers去和服务端进行通讯，
        // 如果服务端允许对应的源与请求方式，浏览器就会让这个ajax请求发送出去，反之就不允许。

        // CORS协议的优缺点
        // 优点
        // 1.通过设置cors协议，允许ajax请求跨域；支持get和post方式发送请求
        // 2.请求是错误处理完备
        // 缺点
        // 1.需要服务端的设置
        // 2.存在着浏览器的兼容性问题。IE10以下的不支持。

        // 代理服务器（proxy server）
        // 通过浏览器A给代理服务B发请求，
        // 服务B再把请求转发给目标服务C,要求浏览器A 和 代理服务B 要同源，
        // 代理服务B 目标服务C 基于HTTP进行数据传输 不受浏览器的同源策略的限制

        // 优点
        // 1提高了访问的速度；
        // 2.安全性得到了提高
        // 缺点
        // 1.容易被内部网络人员滥用
        // 2.需要更高的设置技巧和排除错误的程序
        // 17. 传统Ajax 指的是 XMLHttpRequest（XHR），axios是通过promise实现对ajax技术的一种封装
        // 简单来说:ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。
        // axios用于浏览器和node.js的基于Promise的HTTP客户端
        // fetch是AJAX在ES6的替代品
        // fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
        // 所以现在最好的请求方式是axios

        // 16
        // jsonP,是模拟ajax的一种请求
        // 利用script的scr属性不受同源策略的限制
        // 服务端会返回一个函数形式的字符串，把要传给客户端的数据作为函数的参数传递出去
        // 在客户端，会用script中的scr属性去访问接口，script会把获取到的字符串解析并执行
        // 在页面中准备一个函数，用函数的形参接收服务端传递过来的数据
        // cors协议
        // 浏览器每次都会拦截ajax发过来的请求，浏览器会带着ajax的origin,method,header与服务端进行通讯
        // 如果服务端允许ajax的源，头部和方式，那么浏览器就会让ajax发送请求
        // proxy代理服务器
        // 浏览器A向代理访问B发送请求，代理服务B向目标服务C发送请求，
        // 要求A,B同源，B,C是基于HTTP进行数据传输，不受同源策略的影响


        // 17
        // ajax是传统的XMLHttpRequest,实现了网页局部数据的更新
        // axios是利用proimse技术对ajax进行封装，使之既可以在node.js是运行，又可以在浏览器上运行
        // 区别：axios是对ajax的封装， axios是ajax,ajax不一定是axios
        // fetch是ajax在es6中的替代品，fetch没有对ajax进行封装，用的是原生的js，没有使用XMLHttpRequest,
        // 用axios比较好

        // 18.生命周期
        // 1.创建：beforecreate,created
        // 2.挂载: beforemount,mounted
        // 3.更新：beforeupdate,updated
        // 4.销毁：beforedestroy,destroyed

        // 19
        // （1）父传子：父写属性以及属性名，子用props接收
        // 子传递父：子用$emit("事件名")进行发送，父用事件进行接收

        // （2）ref方法，
        // 通过this.$refs获取对应的组件实例及方法

        // (3)this.$children和this.$parent,可以通过他们分别获取子组件的实例和父组件的实例

        // （4）EventBus(事件总线)
        //  通过一个空的vue实例作为事件总线，通过实例.$emit去传递数据，实例.$on去接收数据


        // 以下都适用于隔代
        // (5)$attrs
        // $attrs，包含父组件中不被prop识别的特性绑定(class和style除外)，
        // 通过 v-bind="$attrs"传给子组件内部的组件

        // (6)vm.$listeners
        // 获取包含了父组件传来的所有 (不含 .native 修饰器的) v-on 事件监听函数
        //  并可以通过 v-on="$listeners" 传入内部组件。

        // (7)provide和inject
        // 在provide中注册，在inject中获取

        // (8）vuex
        // 在vuex的实例对象中的state中添加数据
        // 通过this.$store.state.msg获取即可

        // 没有说适用于隔代
        // (9)作用域插槽
        // 给插槽一个名字，用属性来传递参数，
        // 父组件接收方式：v-slot:名字=xxx 
    </script>
</body>

</html>